<template>
    <pre class="pre-code"><code>{{ code }}</code></pre>
</template>

<script>
import { onMounted, watch, nextTick } from 'vue';

export default {
    name: 'PreCode',
    props: {
        code: {
            type: String,
            default: '',
        },
    },
    setup(props) {
        let nodes = [];
        const initHighlight = () => {
            nextTick(() => {
                if (!nodes.length) return;
                nodes.forEach((node) => { delete node.dataset.highlighted; window.hljs.highlightElement(node); });
            });
        };

        watch(() => nodes, initHighlight);
        watch(() => props.code, initHighlight);

        onMounted(() => {
            nodes = document.querySelectorAll('pre code');
            initHighlight();
        });

        return {};
    },
};
</script>

<style lang="scss">
.pre-code {
    box-sizing: border-box;
    overflow: auto;
    border-radius: 10px;
    background: var(--color-primary-light-9);
    code {
        background: transparent;
        font-family: sans-serif;
        letter-spacing: 0.6px;
        .hljs-comment, .hljs-quote {
            color: #b0b1b7;
        }
    }
}
</style>
